<template>
  <div class="screen-top-right1">
    <div class="screen-top-header flex-l">
      <div class="header-left flex-c">
        <i class="iconfont icon-rank"></i>
      </div>
      <div class="header-right flex-l">
        <span class="header-title">销量渠道分析</span>
        <dv-decoration-3 class="dv-dec-3" />
      </div>
    </div>
    <div class="screen-top-chart">
      <dv-capsule-chart class="dv-cap-chart" :config="config" />
      <!-- <Chart :chart-data="chartData" /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  const config = reactive({
    data: [
      {
        name: '朋友介绍',
        value: 1288,
      },
      {
        name: '官网搜索',
        value: 3564,
      },
      {
        name: '以旧换新',
        value: 1144,
      },
      {
        name: '线上预订',
        value: 1288,
      },
      {
        name: '线下预定',
        value: 3455,
      },
      {
        name: '广告预定',
        value: 1566,
      },
    ],
  });
</script>

<style lang="less" scoped>
  @import '../bigscreen.less';

  .screen-top-right1 {
    height: @box-height4;
    // width: @box-width4;
    background-color: @theme-sub-color;
    margin: 5px;
    border-radius: 10px;

    .screen-top-header {
      height: @chart-header-height;

      .header-left {
        width: 30px;
      }

      .header-right {
        width: calc(100% - 30px);

        .header-title {
          color: #fff;
          font-size: @sm-font-size;
        }

        .dv-dec-3 {
          width: 50px;
          height: 20px;
          margin-left: 10px;
        }
      }
    }
  }
</style>
